<template>
  <div class="box fadeInUp animated">
    <el-card class="boxi" >
      <el-tabs tab-position="left" style="height: 800px;">
        <el-tab-pane label="金币购买" >
          <div class="zhuye">
            <div :class="dangqianjinge===i?'xuanxiang ddd':'xuanxiang fff'"  v-for="(item,i) in zubie" :key="i" @click="xuanqian(item[0],i)">
              <div class="yuanjia">
                <img class="imgyangshi" src="../../assets/renmingbi.png" alt="" srcset="">
                {{item[0]}}</div>
              <div class="kunbi">{{item[1]}}金币</div>
            </div>
          </div>
          <div class="zhifumaya">
            <div style="padding: 20px;display: inline-block;font-size: 20px;float: left;">扫码支付</div>
            <div style="margin-left: 36%;display: inline-block;margin-top: 1%;">
              <div style="display: inline-block;float: left;width: 60%;"><img style="width: 150px;" src="../../assets/erweima.png" alt="" srcset=""/></div>
              <div style="width: 100px;height: 200px;float: left;line-height: 140px;font-size: 20px;">
                <span style="color: #409eff;">需要{{zhzi}}元</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Chonzhi",
  data(){
    return{
      zhekouzhi:6.3,
      jiage:5,
      zubie:[[6,60],[18,180],[30,300],
          [68,680],[118,1180],[198,1980],[256,2560]],
      zhzi:6,
      dangqianjinge:0
    }
  },
  methods:{
    xuanqian(num,n){
      this.zhzi=num;
      this.dangqianjinge=n;
    },
    pathvalue(flag){
      // switch(flag){
      //   case 1:
      //     break;
      //   case 2:
      //     break;
      //   case 3:
      //     break;
      //   case 4:
      //     break;
      //   case 6:
      //     this.$router.push("")
      //     break;
      // }
    }
  }
}
</script>

<style lang="less" scoped>

.box{
  width: 1600px;
  height: 92vh;
  margin: 0 auto;
  .boxi{
    margin-top: 100px;
  }
}
.zhuye{
  display: flex;
  padding: 10px 20px 0;
  flex-flow: row no-wrap;
  justify-content: space-around;
    .xuanxiang{
      width: 140px;
      height: 180px;
      margin: 10px 8px 0 8px;
      border-radius: 10px;
      // border: 1px solid rgb(195, 195, 195);
      background-color: #f0f6ff;
      position: relative;
      text-align: center;
    }
    .yuanjia{
      margin-top: 40%;
      color: #409eff;
      font-size: 25px;
      .imgyangshi{
        width: 20px;
      }
    }
    .kunbi{
      color: #f38111;
      font-size: 10px;
    }
}
.ddd{
  border: 1px solid #409eff;
}
.fff{
  border: 1px solid rgb(195, 195, 195);
}
.zhifumaya{
  color: #909399;
  margin: 0 auto;
  margin-top: 40px;
  width: 93%;
  height: 200px;
  // line-height: 200px;
  // font-size: 50px;
  border-radius: 5px;
  border: 1px solid rgb(139, 139, 139);
}
</style>